<template>
<Form class="content" :labelWidth="110">
<Steps :current="vCurrent" direction="vertical" style="overflow-y: auto;height:95%;">
    <Step :title="$t(`compDesign.jProperty.actionName`)" 
        icon="md-radio-button-on" status="process" @click.native="vCurrent=0">
        <template slot="content">
            <FieldItem v-model="data.action" 
                :config="{type: 'cascader', options: actionCascaderData, clearable: true}"
                :formItemProps="{label: '基本信息'}" @change="actionChange">
                <Button class="ivu-ml" type="primary" ghost @click="asyncEvent">同步</Button>
            </FieldItem>
            <FieldItem v-model="data.requestTimeout" 
                :config="{type: 'number', clearable: true, placeholder: '默认30秒'}"
                :formItemProps="{label: '接口超时时间（秒）', labelWidth: 140}">
            </FieldItem>
        </template>
    </Step>

    <Step :title="$t(`compDesign.jProperty.actionParams`)" icon="md-list-box" 
        status="process" @click.native="vCurrent=1">
        <cfgEditTable slot="content" v-model="data.serviceParamList" 
            :columns="serviceParamList" :showNum="false" />
    </Step>
    <Step :title="lang.filter" icon="ios-help-circle-outline" status="process" @click.native="vCurrent=2">
        <cfgEditTable slot="content" v-model="data.filter" :columns="filterColumns" :showNum="false" />
    </Step>
    <Step :title="$t(`compDesign.jProperty.operationResult`)" icon="md-done-all" 
        status="process" @click.native="vCurrent=3">
        <template slot="content">
            <FieldItem v-model="data.backParamList" :config="{type: 'multiSelect', 
                options: backOptions, clearable: true}"
                :formItemProps="{label: $t(`compDesign.jProperty.resultState`)}"/>
            <FieldItem v-model="data.objectName" 
                :config="{type: 'select', options: groupOptions, clearable: true}"
                :formItemProps="{label: $t(`compDesign.jProperty.operationObj`)}"/>
            <FieldItem v-model="data.objectCheck" 
                :config="{type: 'textarea', clearable: true, placeholder: '如果为空直接调用，如果不为空需要满足条件才会调用, 公式demo: {{data.newRec.length}}'}"
                :formItemProps="{label: lang.checkCondition}"/>
            <FieldItem v-model="data.objectMethod" 
                :config="{type: 'select', options: methodOptions, clearable: true}"
                :formItemProps="{label: $t(`compDesign.jProperty.objectMethod`)}"/>
            <FieldItem v-model="data.customMethod" 
                :config="{type: 'select', options: customMethodOptions, clearable: true}"
                :formItemProps="{label: '自定义方法'}"/>
        </template>
    </Step>
    <Step :title="$t(`compDesign.jProperty.operationDialog`)" 
        icon="md-card" status="process" @click.native="vCurrent=4">
        <template slot="content">
            <FieldItem v-model="data.successCheck" 
                :config="{type: 'textarea', clearable: true, placeholder: successCheckPlaceholder}"
                :formItemProps="{label: lang.checkCondition}"/>
            <FieldItem v-model="data.successType" 
                :config="{type: 'select', options: messageTypeOptions, clearable: true}"
                :formItemProps="{label: lang.tipType}"/>
            <FieldItem v-model="data.successMessage" :config="{type: 'text', clearable: true}"
                :formItemProps="{label: lang.tipMessage}"/>
        </template>
    </Step>
</Steps>
</Form>
</template>

<script>
    import storeVar from '../../../mixins/storeVar';
    import customMethodObj from 'public/starLib/components/client/utils/method/customMethod';
    
    export default {
        name: 'part-service',
        mixins: [storeVar],
        data () {
            return {
                vCurrent: 0,
                successCheckPlaceholder: `如果为空：则只要接口不报错就算成功；
如果不为空，公式demo: {{data.newRec && data.newRec.length}}`,
                messageTypeOptions: [
                    { label: 'success', value: 'success'},
                    { label: 'error', value: 'error'},
                    { label: 'warning', value: 'warning'},
                    { label: 'info', value: 'info'},
                    // { label: 'confirm', value: 'confirm'},
                ],
                methodOptions: this.tools.getOptions(['setData', 'queryData', 'setVisible']),
                customMethodOptions: customMethodObj.methodList,
                filterColumns: [
                    {
                        key: 'title',
                        title: '提示消息',
                        maxWidth: 160,
                        elementName: 'fieldCell',
                        props: { config: { 
                            type: 'textarea', autosize: true, placeholder: '"文本"字段为空，不能审批' 
                        } }
                    },
                    {
                        key: 'content',
                        title: '提示条件',
                        elementName: 'fieldCell',
                        props: { config: { 
                            type: 'textarea', rows: 1, autosize: true, clearable: true,
                            placeholder: `{{curRecord.text === '' ? true : false}}`
                        } }
                    },
                    {slot: 'operation'}
                ]
            }
        },
        props: {
            data: {
                default() {
                    return []
                }
            },
            actionCascaderData: {
                default() {
                    return []
                }
            },
            eventMap: {
                default() {
                    return {}
                }
            },
        },
        computed: {
            eventItem() {
                return this.eventMap[this.data.action.join('_')]
            },
            paramsOptions() {
                let res = []
                if (this.data.action.length && this.eventItem) {
                    res = this.tools.getOptions(this.eventItem.event.params, 'name', 'name')
                }
                return res
            },
            backOptions() {
                let res = []
                if (this.data.action.length && this.eventItem) {
                    res = this.tools.getOptions(this.eventItem.event.back.state, 'name', 'name')
                }
                return res
            },
            groupOptions() {
                let res = []
                this.compGroup.classGroup.forEach(item => {
                    res.push({label: `${item.title}`, value: item.title})
                });
                return res;
            },
            groupNoSelfOptions() {
                let res = []
                this.compGroup.classGroup.forEach(item => {
                    (this.compGroup.currentId != item.id) && res.push({label: `${item.title}`, value: item.title})
                });
                return res;
            },
            serviceParamList() {
                return [
                    // {
                    //     key: 'source',
                    //     title: this.$t(`compDesign.jProperty.varSource`),
                    //     maxWidth: 136,
                    //     elementName: 'fieldCell',
                    //     props: { config: { type: 'select', clearable: true, placeholder: '默认当前组件',
                    //         options: this.groupNoSelfOptions
                    //         // [...this.groupOptions, {label: 'eventItemData', value: 'eventItemData'}]
                    //     } }
                    // },
                    {
                        key: 'name',
                        title: this.$t(`compDesign.jProperty.name`),
                        maxWidth: 145,
                        elementName: 'fieldCell',
                        props: { config: { type: 'textarea', autosize: true, disabled: true } }
                    },
                    {
                        key: 'path',
                        title: this.$t(`compDesign.jProperty.varPath`),
                        elementName: 'fieldCell',
                        props: { config: { 
                            type: 'textarea', rows: 1, autosize: true, clearable: true,
                            placeholder: `[{
    "id": {{curRecord.id}}, 
    "values": {"orderStatus": "3"}
}]`
                        } }
                    },
                    {
                        key: 'toJson', title: 'toJson', maxWidth: 60,
                        elementName: 'fieldCell',
                        props: { config: { type: 'check'} }
                    }
                    // { slot: 'operation', }
                ]
            },
            backParamList() {
                return [
                    {
                        key: 'name',
                        title: this.$t(`compDesign.jProperty.name`),
                        elementName: 'fieldCell',
                        props: { config: { type: 'multiSelect', clearable: true, options: this.backOptions } }
                    },
                    {
                        key: 'value',
                        title: this.$t(`compDesign.jProperty.value`),
                        elementName: 'fieldCell',
                        props: { config: { type: 'text', clearable: true } }
                    },
                    { slot: 'operation', }
                ]
            },
            lang () {
                return {
                    'en-US': {
                        checkCondition: 'checkCondition',
                        tipType: 'tipType',
                        tipMessage: 'tipMessage',
                        filter: 'check filter'
                    },
                    'zh-CN': {
                        checkCondition: '判断条件',
                        tipType: '提示类型',
                        tipMessage: '提示文案',
                        filter: '事件执行前的判断条件'
                    }
                }[this.G_Locale]
            }
        },
        methods: {
            actionChange(val) {
                if (val.length) {
                    this.data.serviceParamList = this.tools.lodash.cloneDeep(
                        this.eventItem.event.params.map(item => { return {name: item.name, toJson: false} })
                    )
                } else {
                    this.data.serviceParamList = []
                    this.data.backParamList = []
                }
                this.data.filter = []
            },
            asyncEvent() {
                if (!this.eventItem) {
                    return
                }
                let oldParams = {}

                this.data.serviceParamList.forEach(item => {
                    oldParams[item.name] = item
                })
                this.data.serviceParamList.length = 0
                this.eventItem.event.params.forEach(item => {
                    this.data.serviceParamList.push(oldParams[item.name] || {name: item.name, toJson: false})
                })
                this.data.filter = this.data.filter || []
            }
        }
    }
</script>

<style lang="less" scoped>
.content {
    /deep/ .ivu-step {
        cursor: pointer
    }
    /deep/ .c-formItem {
        margin-bottom: 4px;
    }
}
</style>
